<template>
  <layout>
    <div class="mine-content">
      <div class="right-content">
        <div class="avatar">
          <img :src="useList.image" alt="" />
          <div class="nickname">
            <span @click="personalEvt" class="top"
              >{{ useList.name }}
              <van-icon name="arrow" />
            </span>
            <span class="buttom">已签到6天</span>
          </div>
        </div>
        <div class="icon">
          <van-icon name="envelop-o" size="30" @click="letterEvt" />
        </div>
      </div>
    </div>
    <div class="concern-collection">
      <div @click="concernEvt" class="concern">
        <span
          ><img :src="icon.image" alt="" />&emsp;我关注的电台</span
        >
        <div class="rt-box">
          <i><van-icon name="arrow" /></i>
        </div>
      </div>
      <div @click="collectionEvt" class="collection">
        <span
          ><img src="../../images/logo.png" alt="" />&emsp;我收藏的播单</span
        >
        <div class="rt-box">
          <i><van-icon name="arrow" /></i>
        </div>
      </div>
    </div>
    <div class="change">
      <van-tabs v-model:active="activeName">
        <div class="number">
          <span class="total">共2首</span
          ><span class="choose">
            <van-icon name="arrow-left" color="#ee7c63" /> 多选</span
          >
        </div>
        <van-tab title="收藏节目" name="a">
          <van-card
            v-for="it in collection"
            :key="it"
            :desc="it.desc"
            :title="it.title"
            :thumb="it.thumb"
          />
        </van-tab>
        <van-tab title="最近播放" name="b">
          <van-card
            v-for="it in lastPlay"
            :key="it"
            :desc="it.desc"
            :title="it.title"
            :thumb="it.thumb"
          />
        </van-tab>
      </van-tabs>
    </div>
  </layout>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";
import Ajax from "../../apis/Ajax";
import layout from "../../components/layout.vue";

const activeName = ref("");
const router = useRouter();
let collection: any = ref([]);
let useList: any = reactive({});
// 最近播放数组
let lastPlay: any = ref([]);

let icon:any=ref({})

onMounted(() => {
  useList = {
    name: "赵明亮",
    image: "/src/images/p8.jpg",
  };
  icon={
    image:'src/images/concern.jpg'
  }
  collection.value = [
    {
      desc: "煌甫云杰",
      title: "旅行的意义到底是什么",
      thumb:
        "https://ts4.cn.mm.bing.net/th?id=OIP-C.H9c2zNaWK8Rl82XnrcW07QHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
    },
    {
      desc: "姚小明",
      title: "今天你累吗",
      thumb:
        "https://tse3-mm.cn.bing.net/th/id/OIP-C.qtXZkdEzO1l-cYsRLSfc0gHaHa?w=193&h=193&c=7&r=0&o=5&pid=1.7",
    },
  ],
    lastPlay.value = [
      {
        desc: "颖灵心语",
        title: "把烦心事丢掉,腾出地方装星星——咨询室的故事",
        thumb:
          "https://qpic.y.qq.com/music_cover/kGLjZpdYBzic5qRiclmCYnIqA1cicEhE2iaiaVQ2VsrNfkDL3VTlF41vQeicJo3TORyjEP/300?n=1",
      },
      {
        desc: "NJ夏忆",
        title: "走，去伊朗的岛屿撒野",
        thumb:"https://tse4-mm.cn.bing.net/th/id/OIP-C.sIb3kk0Cr4nl8nlQKZZObwHaHR?w=198&h=194&c=7&r=0&o=5&pid=1.7",
      },
    ];
});
function personalEvt() {
  router.push("/mine/personal");
}
function concernEvt() {
  router.push("/mine/concern");
}
function collectionEvt() {
  router.push("/mine/collection");
}
function letterEvt() {
  router.push("/mine/letter");
}

</script>

<style lang="less" scoped>
.van-card__content {
  padding: 20px;
}
.van-card__title {
  font-size: 16px;
}
.van-card__desc {
  margin-top: 10px;
  letter-spacing: 1px;
}

.concern-collection {
  margin-top: 20px;
  height: 100px;
  background-color: #f7f8fa;
  padding-left: 20px;
}
.concern {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: 1px;
  color: #595959;
  border-bottom: 1px solid #bfbfbf;
}
.concern img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  margin-top: 5px;
}

.collection {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 20px;
  line-height: 40px;
  letter-spacing: 1px;
  color: #595959;
  // border-bottom: 1px solid #bfbfbf;
}
.collection img {
  width: 30px;
  height: 30px;
  margin-left: 10px;
  margin-top: 5px;
}

.change {
  padding-top: 20px;
  color: #bfbfbf;
  background-color: #f7f8fa;
}
.total {
  font-size: 16px;
  padding-left: 20px;
  letter-spacing: 1px;
  color: #bfbfbf;
}
.choose {
  font-size: 16px;
  padding-left: 20px;
  letter-spacing: 1px;
  color: #bfbfbf;
}
.number {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.right-content {
  width: 450px;
  height: 100px;
  display: flex;
  justify-content: space-between;
}
.avatar {
  display: flex;
  flex-direction: row;
  width: 200px;
  height: 100px;
  margin-left: 30px;
}
.avatar img {
  width: 90px;
  height: 90px;
  margin-top: 10px;
}
.avatar .top {
  width: 100px;
  font-size: 18px;
}
.avatar .buttom {
  width: 100px;
  font-size: 12px;
  padding-top: 10px;
  color: #bfbfbf;
}
.nickname {
  width: 100px;
  height: 100px;
  display: flex;
  flex-direction: column;
  margin-top: 40px;
}
.icon {
  position: fixed;
  top: 80px;
  right: 10px;
}
</style>